// Map gradient class to its primary color
const gradientPrimaryColors = {
    "bg-gradient-blue": "#113253",
    "bg-gradient-purple": "#6365B5",
    "bg-gradient-green": "#1781C3",
    "bg-gradient-orange": "#FF9800",
    "bg-gradient-dark-purple": "#380F59",
    "bg-gradient-teal": "#4facfe",
    "bg-gradient-indigo": "#490552",
    "bg-gradient-cyan": "#74b9ff"
};

// After your cards are rendered in the DOM:
function setButtonTextColor() {
    document.querySelectorAll('.new-digi-card').forEach(card => {
        let btn = card.querySelector('.new-digi-card-btn');
        if (!btn) return;
        let found = Object.entries(gradientPrimaryColors).find(([cls]) => card.classList.contains(cls));
        if (found) {
            btn.style.setProperty('color', found[1], 'important');
        } else {
            btn.style.setProperty('color', '#105df6', 'important'); // fallback color
        }
    });
}

// Call this after rendering cards

// Load education data from assets
async function loadEducationData() {
    try {
        await new Promise(resolve => setTimeout(resolve, 1200)); // Optional delay
        const response = await fetch('assets/landing/university_data.json');

        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }

        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error loading data:', error);
        throw error;
    }
}

// Create individual card HTML
function createCard(data) {
    return `
        <div class="card new-digi-card border-0   ${data.bgGradientClass} text-white card-hover transition-all" data-url="/web/dashboard/issuers/${data.orgId}"
             id="${data.shortName}" style="transition: transform 0.3s ease;cursor:pointer" onclick="redirectCard(this)">
            <div class="card-body px-3 py-3  d-flex flex-column" >
                <div class="d-flex align-items-start gap-lg-2 gap-2 flex-grow-1">
                    <div class="new-digi-card-logo  d-flex align-items-center align-self-center justify-content-center flex-shrink-0 ">
                        <img src="https://cf-media.api-setu.in/logo/issuers/${data.orgId}.png" 
                             alt="${data.title} Logo" 
                             class="" 
                             style="height:100%; object-fit: contain;" 
                             loading="lazy" title="${data.title}">
                    </div>
                    <div class="text-start">
                        <div class="card-text-box">
                            <h5 class="new-digi-card-title fw-bold  lh-sm m-md-0 " style="padding-top:4px" title="${data.title + (data.year ? ' - ' + data.year : '')}">
                                <span  id="${data.shortName}-Name" >${data.title}</span>
                                <span>${data.year ? ` - ${data.year}` : ''}</span>
                            </h5>
                            <p class="new-digi-card-sub-title my-lg-1 my-0 opacity-75" id="${data.shortName}-Subtitle" title="${data.subTitle}">
                                ${data.subTitle}
                            </p>
                        </div>
                        <button class=" new-digi-card-btn no-dark-reset"  
                                id="AvailableNow" title="${data.buttonTitle}">
                            ${data.buttonTitle}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
}
// Render cards into Owl Carousel
function renderCards(data, containerId) {
    const container = document.getElementById(containerId);
    const loadingElement = document.getElementById('loading');
    const errorElement = document.getElementById('error');

    try {
        if (!container) {
            throw new Error(`Container with ID "${containerId}" not found`);
        }

        loadingElement.style.display = 'none';

        const cardsHTML = data.map(item => `<div class="item">${createCard(item)}</div>`).join('');
        container.innerHTML = cardsHTML;

        // Destroy previous carousel if re-rendering
        if ($(container).hasClass('owl-loaded')) {
            $(container).trigger('destroy.owl.carousel').removeClass('owl-loaded');
            container.innerHTML = cardsHTML; // Reset
        }

        // Initialize Owl Carousel
        $(container).owlCarousel({
            loop: true,
            margin: 10,
            nav: true,
            dots: true,
            autoplay: true,
            autoplayTimeout: 3000,
            autoplayHoverPause: true,
            responsive: {
                0: { items: 1 },
                350: { items: 1.17 },
                425: { items: 1.35 },
                768: { items: 2.4 },
                992: { items: 3.2 },
                1200: { items: 3.8 },
                1400: { items: 4.4 }
            }
        });
        setButtonTextColor();
        attachCardClickHandlers();

    } catch (error) {
        console.error('Error rendering cards:', error);
        loadingElement.style.display = 'none';
        errorElement.classList.remove('d-none');
    }
}

// Card click handler
function handleCardClick(cardId, universityName) {
    const toastHTML = `
        <div class="toast align-items-center text-white bg-success border-0 position-fixed top-0 end-0 m-3" 
             role="alert" aria-live="assertive" aria-atomic="true" style="z-index: 9999;">
            <div class="d-flex">
                <div class="toast-body">
                    <strong>${universityName}</strong><br>
                    <small>Card ID: ${cardId}</small>
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" 
                        data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    `;

    document.body.insertAdjacentHTML('beforeend', toastHTML);
    const toastElement = document.querySelector('.toast:last-child');
    const toast = new bootstrap.Toast(toastElement, { autohide: true, delay: 3000 });
    toast.show();

    toastElement.addEventListener('hidden.bs.toast', () => {
        toastElement.remove();
    });

    console.log('Card clicked:', { cardId, universityName });
}

// Initialize app
async function initCarousel(containerId) {
    try {
        const data = await loadEducationData();
        renderCards(data, containerId);
    } catch (error) {
        console.error('Failed to initialize:', error);
        document.getElementById('loading').style.display = 'none';
        document.getElementById('error').classList.remove('d-none');
    }
}

// Start on DOM ready
document.addEventListener('DOMContentLoaded', () => {
    initCarousel('cards-container'); // Pass container ID

    // Optional: hover effect
    document.addEventListener('mouseover', (e) => {
        if (e.target.matches('button[id$="-btn"]')) {
            e.target.style.background = 'rgba(255,255,255,0.3)';
            e.target.style.transform = 'scale(1.05)';
        }
    });
    document.addEventListener('mouseout', (e) => {
        if (e.target.matches('button[id$="-btn"]')) {
            e.target.style.background = 'rgba(255,255,255,0.2)';
            e.target.style.transform = 'scale(1)';
        }
    });
});
document.addEventListener('click', (e) => {
    const card = e.target.closest('.uni-card');
    if (card && card.dataset.url) {
        window.location.href = card.dataset.url;
    }
});

function redirectCard(card) {
    const url = card.getAttribute('data-url');
    if (url) {
        window.location.href = url;
    }
}
function attachCardClickHandlers() {
    document.querySelectorAll('.new-digi-card').forEach(card => {
        card.addEventListener('click', function (event) {
            const url = card.getAttribute('data-url');
            if (url) {
                window.location.href = url;
            }
        });
    });
}
window.addEventListener("load", function () {
    const lazyImages = document.querySelectorAll("img.lazy-image");

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                // const src = img.getAttribute("data-src");
                const src = img.getAttribute("data-src")?.replace(/^src:/, "https:").replace(/["']/g, "");
                if (src) {
                    img.src = src;
                    img.onload = () => {
                        img.classList.add("loaded");
                    };
                    observer.unobserve(img);
                }
            }
        });
    }, {
        rootMargin: "100px",
        threshold: 0.01
    });

    lazyImages.forEach(img => {
        observer.observe(img);
    });

    setTimeout(() => {
        $('.owl-carousel').each(function () {
            //Find each set of dots in this carousel
            $(this).find('.owl-dot').each(function (index) {
                //Add one to index so it starts from 1
                $(this).attr('aria-label', index + 1);
            });
        });
    }, 1500);
   
});